<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>layout 后台大布局 - Layui</title>
    <link rel="stylesheet" href="/ordermaker/pages/layui/css/layui.css">
</head>
<body style="background-color: #F2F2F2;">
#include("head.html")
<div style="padding: 20px;width: 90%;margin-left: 10%;">
    <div class="layui-row layui-col-space15">
        #for(data:datas)
        #if(data.isState())
        <div class="layui-col-md2">
            <div class="layui-card">
                <div class="layui-card-body">
                    日期：#date(data.getDay(),"YYYY年MM月dd日")<br>
                    星期：#("星期"+data.getXingqi())<br>
                    节次：#("第"+data.getJieci()+"节")<br>
                    录课教师：#(data.getSheying())<br>
                    <button type="button" class="layui-btn layui-btn-normal layui-btn-xs layui-btn-fluid layui-btn-disabled">已结束</button>
                </div>
            </div>
        </div>
        #else
        <div class="layui-col-md2">
            <div class="layui-card">
                <div class="layui-card-body">
                    日期：#date(data.getDay(),"YYYY年MM月dd日")<br>
                    星期：#("星期"+data.getXingqi())<br>
                    节次：#("第"+data.getJieci()+"节")<br>
                    录课教师：#(data.getSheying())<br>
                    <div class="layui-btn-container">
                        <button name="quxiaoyuyue" data-id="#(data.id)" data-name="#(name)" type="button" class="layui-btn layui-btn-danger layui-btn-xs layui-btn-fluid">取消预约</button>
                        <button name="changestate" data-id="#(data.id)" data-name="" type="button" class="layui-btn layui-btn-normal layui-btn-xs layui-btn-fluid">已完成</button>
                    </div>
                </div>
            </div>
        </div>
        #end
        #if((for.index+1)%5==0)
        <div class="layui-col-md2" style="height: 200px;">

        </div>
        #end
        #end
    </div>
</div>
<script src="/ordermaker/pages/layui/layui.js"></script>
<script>
    //JavaScript代码区域
    layui.use(['element','layer'], function(){
        var element = layui.element;
        layui.jquery("[name='yuyue']").click(function (event) {
            var datas=event.currentTarget.dataset;
            layer.prompt({
                formType: 2,
                title: '请输入你的姓名',
                area: ['200px', '20px'] //自定义文本域宽高
            }, function(value, index, elem){
                // alert(value); //得到value
                datas.name=value;
                layui.jquery.ajax({
                    url: "/ordermaker/yuyue",
                    type: 'post',//method请求方式，get或者post
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded'
                    },
                    xhrFields:{
                        withCredentials:true
                    },
                    dataType: 'json',//预期服务器返回的数据类型
                    data: datas,//表格数据序列化
                    success: function (res) {//res为相应体,function为回调函数
                        console.log(res);
                        if(res.erro===0){
                            layer.alert('预约成功了，记得准时赴约哦！！！',function (index) {
                                layer.closeAll();
                                location.href="/ordermaker/list?page=#(page)"
                            });
                        }else{
                            layer.alert('课都约不到，日子没发过了！！！');
                        }
                    },
                    error: function (res) {
                        console.log(res);
                        layer.alert('系统和别人私奔了，伤心~');
                    }
                });
            });
        });
        layui.jquery("[name='quxiaoyuyue']").click(function (event) {
            var datas=event.currentTarget.dataset;
            layer.confirm('亲，你确定取消吗？', {
                btn: ['是的','点错了'] //按钮
            }, function(){
                layui.jquery.ajax({
                    url: "/ordermaker/quxiaoyuyue",
                    type: 'post',//method请求方式，get或者post
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded'
                    },
                    xhrFields:{
                        withCredentials:true
                    },
                    dataType: 'json',//预期服务器返回的数据类型
                    data: datas,//表格数据序列化
                    success: function (res) {//res为相应体,function为回调函数
                        console.log(res);
                        if(res.erro!=0){
                            layer.alert('亲，帮我找找管理员，我要修整修整')
                        }else{
                            layer.alert('你的约课取消了，记得哦！！！',function (index) {
                                layer.closeAll();
                                location.href="/ordermaker/myrecord?who=#(name)"
                            });
                        }
                    },
                    error: function (res) {
                        console.log(res);
                        layer.alert('系统和别人私奔了，伤心~');
                    }
                });
            }, function(){
                layer.msg('哎呀，吓得我一个哆嗦', {
                    time: 1000 //20s后自动关闭
                });
            });
        });
        layui.jquery("[name='changestate']").click(function (event) {
            var datas=event.currentTarget.dataset;
            layer.confirm('你已经录好这节课了吗？', {
                btn: ['是的','点错了'] //按钮
            }, function(){
                layui.jquery.ajax({
                    url: "/ordermaker/changestate",
                    type: 'post',//method请求方式，get或者post
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded'
                    },
                    xhrFields:{
                        withCredentials:true
                    },
                    dataType: 'json',//预期服务器返回的数据类型
                    data: {id:datas.id},//表格数据序列化
                    success: function (res) {//res为相应体,function为回调函数
                        console.log(res);
                        if(res.erro!=0){
                            layer.alert('亲，帮我找找管理员，我要修整修整')
                        }else{
                            layer.alert('亲，这节录课已帮您设置成了结束状态',function (index) {
                                layer.closeAll();
                                location.href="/ordermaker/myrecord?who=#(name)"
                            });
                        }
                    },
                    error: function (res) {
                        console.log(res);
                        layer.alert('系统和别人私奔了，伤心~');
                    }
                });
            }, function(){
                layer.msg('哈哈哈，手滑了', {
                    time: 1000 //20s后自动关闭
                });
            });
        });
        layui.jquery("[name='pre']").click(function (event) {
            var datas=event.currentTarget.dataset;
            var page=parseInt(datas.page);
            if(page<=1){
                layer.alert('时光一去不复返，不可以预约之前的课哦！！！');
            }else{
                location.href="/ordermaker/list?page="+(page-1);
            }
        });
        layui.jquery("[name='next']").click(function (event) {
            var datas=event.currentTarget.dataset;
            var page=parseInt(datas.page);
            if(page>=4){
                layer.alert('兄die，我觉得下个月的事情还是下个月来吧');
            }else{
                location.href="/ordermaker/list?page="+(page+1);
            }
        });
    });
</script>
</body>
</html>